<template>
    <div>
        <!-- 
            生命周期：
                vue实例从创建到销毁的过程，也就是从开始创建
                ，初始化数据，编译横板，挂载dom渲染，更新渲染，卸载等一系列过程

                在生命周期的不同阶段对应着不同钩子函数，
                利用这些函数可以实现数据管理和dom操作两大重要功能

                八个生命周期：
                1.vue实例创建之前 beforeCreate
                2.vue实例创建之后 created
                3.dom加载完成之前 beforeMount
                4.dom加载完成之后 mounted
                5.数据更新之前 beforeUpdate
                6.数据更新之后 updatad
                7.实例销毁之前 beforeDestroy
                8.实例销毁之后 destroyed

                首次加载页面，会触发哪些生命周期：
                1.vue实例创建之前 beforeCreate
                2.vue实例创建之后 created
                3.dom加载完成之前 beforeMount
                4.dom加载完成之后 mounted

        -->
                <!-- 获取dom 先用ref给dom起个名,再通过this.$refs.名字 获取dom -->
                <p ref="ps">{{ msg }}</p>
                <p>{{ num }}</p>
                <button @click="handleClick">数据变化</button>
                <button @click="des">销毁</button>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                msg:"二狗",
                num: 1
            }
        },
        methods:{
            handleClick(){
                console.log("二狗过端午")
                this.num++
            },
            des(){
                // 销毁实例
                this.$destroy()
            }
        },
        beforeCreate(){
            console.log("vue实例创建之前,初始化了一个空白的vue实例,此时只有一些基础的默认的时间和生命周期，其他内容还没创建,data和method都无法访问")
        },
        created(){
            console.log(this.msg)
            this.handleClick()
            // console.log(this.$ref.ps,"获取dom")//undefined
            console.log("实例创建之后,此阶段data和methods已经初始好了,想要操作data中的数据或者调用method的方法最早在这个阶段,但是created不能操作dom")
            //等待dom加载完成之后再执行 dom操作失败时使用
            this.$nextTick(() => {
                 console.log(this.$refs.ps,"获取dom")
            } )
        },
        beforeMount(){
            console.log(this.$refs.ps,"beroeMount获取dom")
            console.log("dom加载完成之前,横板已经在内存中编译完了,但是还没挂载到页面上")
        },
        mounted(){
            console.log("dom加载完成之后,vue实例已经完全成熟,是我们实现方法,过度,dom操作的最佳阶段,此时组件已经脱离创建,进入运行阶段")
        },
        beforeUpdate(){
            console.log("数据更新前，此时页面中显示的数据还是旧的,data里的数据是最新的,页面数据未同步")
        },
        updated(){
            console.log("数据更新之后,页面和数据同步")
        },
        beforeDestroy(){
            console.log("实例销毁之前,vue实例已经从运行阶段进入到销毁阶段,data,method还处于可用状态")
        },
        destroyed(){
            console.log("实例销毁之后,组件已被摧毁,方法不可用")
        }
    }
</script>